import React, { useState, useEffect } from 'react'
import {connect} from 'dva';
import { Table, Tag, space,Button  } from 'antd';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'
import { stringify } from 'querystring'
import styles from '../Cooperative.less'

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

@connect(({cooperativeStore})=>({
    list: cooperativeStore.list,
    BasicInfoId:cooperativeStore.BasicInfoId
}))
class CooperativeList extends React.Component {
    state = {
        cooper:[],
        BasicInfoId:'',//关系id
        supplierId:'',//供应商id
        shopId:'',//店铺id

        pageIndex: 1,
        pageSize: 5,
        total: '',

        selectedRowKeys: [], // Check here to configure the default column
    loading: false,

      };
      //初始化时自调用一次，用于请求借口数据
    componentDidMount(){
        const { dispatch } = this.props;
        dispatch({
            type: 'cooperativeStore/queryList',
            payload:{
                data:{
                    "pageIndex": 1,
                    "pageSize": 10
                  }
            }
        }).then(res => {
            if(res.code==200){
                console.log("查看id:",res)
                this.setState({
                    cooper:res.data.queryShopApplyDto.resultList,
                })
            }
        });
        
    }
    start = () => {
        this.setState({ loading: true });
        // ajax request after empty completing
        setTimeout(() => {
          this.setState({
            selectedRowKeys: [],
            loading: false,
          });
        }, 1000);
      };
    
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
      };
      del=()=>{
          
          
      }
    render() {
        const {cooper}=this.state;
        
         const columns = [{
                    title: '序号',
                    render:(text,record,index)=>`${index+1}`,
                    align: 'center'
                },
                {
                    title: '服务名称',
                    dataIndex: 'resourcesName',
                    align: 'center'
                },
                {
                    title: '服务类型',
                    dataIndex: 'resourcesType',
                    align: 'center'
                },
                {
                    title: '店铺',
                    dataIndex: 'shopId',
                    align: 'center',
                    render: (text,record) => {
                        let query = {
                             BasicInfoId:record.id,
                             supplierId:record.supplierId,
                             shopId:record.shopId
                        };
                        console.log("传入子组件的ID",record.id,record.supplierId,record.shopId)
                        return (
                            <Link to = {`/CooperativeStore/ServiceManagement/CooperativeListSub?${stringify(query)}`}>
                                
                                { text }
                            </Link>
                        )
                    }
                },
                {
                    title: '服务机场',
                    dataIndex: 'serviceAirport',
                    align: 'center'
                },
                {
                    title: '特殊服务',
                    dataIndex: 'specialService',
                    align: 'center'
                },
                {
                    title: '车辆类型',
                    dataIndex: 'vehicleType',
                    align: 'center'
                },
                {
                    title: '运输类型',
                    dataIndex: 'transportType',
                    align: 'center'
                },
                {
                    title: '申请时间',
                    dataIndex: 'applyTime',
                    align: 'center'
                },
                {
                    title: '服务状态',
                    dataIndex: 'supplierApplyStatus',
                    align: 'center',
                    render: (text, record) =>{
                        let span ='';
                        if(record.supplierApplyStatus == 1){
                            span = <span style={{color:'#343434'}}>待处理</span>
                        }else if (record.supplierApplyStatus == 2){
                            span = <span style={{color:'#F5222E'}}>已处理</span>
                        } else if (record.supplierApplyStatus == 3){
                            span = <span style={{color:'#EB6F4E'}}>已拒绝</span>
                        }else if (record.supplierApplyStatus == 4){
                            span = <span style={{color:'#EB6F4E'}}>被打回</span>
                        }
                        return(<div>{span}</div> )

                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    render: (text,record) => {
                        let query = {
                            BasicInfoId:record.id,
                            supplierId:record.supplierId,
                            shopId:record.shopId
                       };
                       console.log("传入子组件的ID",record.id,record.supplierId,record.shopId)
                       let span ='';
                        if(record.supplierApplyStatus == 1){
                            span = <span><Link to = {`/CooperativeStore/ServiceManagement/CooerativeListHandle?${stringify(query)}`}>处理</Link></span>
                        }else if (record.supplierApplyStatus == 2){
                            span = <span><Link to = {`/CooperativeStore/ServiceManagement/CooerativeListHandle?${stringify(query)}`}>查看</Link></span>
                        } else if (record.supplierApplyStatus == 3){
                            span = <span><Button onClick={()=>this.del(record.id)} className={styles.antBtn}> 删除</Button></span>
                        }else if (record.supplierApplyStatus == 4){
                            span = <span><Link to = {`/CooperativeStore/ServiceManagement/CooerativeListHandle?${stringify(query)}`}>处理</Link></span>
                        }
                        return(<div>{span}</div> )
                        
                    }
            },
    ];

    

    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;

    return ( 
    <div>
        <div>
            <div>
            {/* <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
                Reload
            </Button> */}
            <span style={{ marginLeft: 8 }}>
                {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
            </span>
            </div>
            <Table rowSelection={rowSelection} columns={columns} dataSource={cooper}
                pagination={{
                    showSizeChanger: true,
                    showQuickJumper: true,
                    defaultCurrent: 1,
                    // total: 500,
                    total: this.state.total,
                    defaultPageSize:5,
                    pageSizeOptions:[5, 20, 50, 100],
                    showTotal: total => `共 ${total} 条`,
                    pageIndex: this.state.pageIndex,
                    onChange: this.changePage,
                  }}
            />
        </div>
      
	
    </div>
    )
}
changePage = page => {
    this.setState({
      pageIndex: page,
    });
  };
}

export default CooperativeList